<template>
  <div class="bigBox">
    <!-- 搜索部分 -->
    <div class="seasrch">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 主体表格区域 -->
    <div class="content">
      <!-- 新建按钮 -->
      <el-row>
        <el-button type="primary" size="small">主要按钮</el-button>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="name"
          label="人员名称"
          width="300"
        />
        <el-table-column
          prop="area"
          label="归属区域"
          width="300"
        />
        <el-table-column
          prop="role"
          label="角色"
          width="300"
        />
        <el-table-column
          prop="tel"
          label="联系电话号"
          width="300"
        />
        <el-table-column label="操作" width="180" align="left">
          <template #default="{ row }">
            <a style="margin-left:18px;color:blue" @click="del(row.id)">修改</a>
            <a style="margin-left:18px;color:red" @click="add(row)">删除</a>
          </template>
        </el-table-column>
      </el-table>
      <!-- 下面的部分 -->
      <el-row class="bottom">
        <el-col :span="20"><div class="count">共33条记录  第 1/4 页</div></el-col>
        <el-col :span="4">
          <el-button-group>
            <el-button size="small" type="primary" icon="el-icon-arrow-left" disabled>上一页</el-button>
            <el-button size="small" type="primary" style="margin-left:20px;">下一页<i class="el-icon-arrow-right el-icon--right" /></el-button>
          </el-button-group>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }]
    }
  },
  methods: {
    onSubmit() {
      console.log('submit!')
    },
    handleClick(row) {
      console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox{
  padding: 20px;
  .search {
    background-color: #fff;
    padding: 10px;
    padding-bottom: 0px;
  }
}
.content {
    margin-top: 20px;
    background-color: #fff;
    padding: 20px;
  }
  .bottom {
  margin-top: 30px;
}
</style>
